import lottie from '../../libs/lottie.js'

Component({

  properties: {
    // 画布宽度
    width: {
      type: Number,
      value: 100
    },
    // 画布高度
    height: {
      type: Number,
      value: 100
    },
    // 设计图宽度
    planWidth: {
      type: Number,
      value: 750
    },
    // 动画名字
    name: {
      type: String,
      value: ''
    }
  },

  data: {
    systemInfo: wx.getSystemInfoSync()
  },

  ready() {
    this.init()
  },

  methods: {

    // 动画初始化
    init() {
      let canvasContext = wx.createCanvasContext('lottie-canvas', this)
      let { width, height, name } = this.data
      let animationData = require(`../../lottie-data/${name}/data.json.js`)

      canvasContext.canvas = {
        width: this.getLength(width),
        height: this.getLength(height)
      }

      lottie.loadAnimation({
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        animationData,
        rendererSettings: {
          context: canvasContext,
          clearCanvas: true
        }
      })
    },

    // 动态单位转换
    getLength(width) {
      let { systemInfo, planWidth } = this.data
      return width / planWidth * systemInfo.windowWidth
    }

  }

});